<script setup>
import { RouterView } from 'vue-router'
import { onMounted, ref } from 'vue'
import { ElIcon, ElSubMenu } from 'element-plus';

const isCollapse = ref(false)

onMounted(() => {
    document.getElementById("container").style.height = window.innerHeight + "px";
    window.onresize = function () {
        document.getElementById("container").style.height = window.innerHeight + "px";
    }
})

function switchMenu() {
    isCollapse.value = !isCollapse.value
}
</script>

<template>
    <div class="container" id="container">
        <div class="slide">
            <div class="logo">让天下没有难做的生意</div>
            <ElMenu default-active="machine" id="mmenu" :collapse="isCollapse" :router="true">
                <ElMenuItem index="machine"><el-icon>
                        <Operation />
                    </el-icon><span>主机管理</span></ElMenuItem>
                <ElMenuItem index="cluster"><el-icon>
                        <Operation />
                    </el-icon><span>集群管理</span></ElMenuItem>

                <ElSubMenu index="sub-1">
                    <template #title>
                        <el-icon>
                            <Monitor />
                        </el-icon>
                        <span>第一小组</span>
                    </template>
                    <ElMenuItem index="first">主机管理</ElMenuItem>
                    <ElMenuItem index="second">集群管理</ElMenuItem>
                </ElSubMenu>

                <ElMenuItem index="system">
                    <el-icon>
                        <Setting />
                    </el-icon>
                    <span>系统管理</span>
                </ElMenuItem>
            </ElMenu>
        </div>
        <div class="main">
            <RouterView />
        </div>
    </div>
</template>

<style scope lang="scss">
body {
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-direction: row;

    .slide {
        background-color: #393e46;
        height: 100%;

        .logo{
            height: 64px;
        }

        .el-menu {
            border-right: 0;
            background-color: #393e46;

            .el-sub-menu {
                .el-sub-menu__title {
                    color: #eee;
                }

                .el-sub-menu__title:hover {
                    background-color: #222831;
                }
            }

            .el-menu-item {
                color: #eee;
            }

            .el-menu-item:hover,
            .el-menu-item.is-active {
                background-color: #222831;
            }
        }
    }

    .main {
        flex-grow: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;
    }
}
</style>
